<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<style>
		* {
			box-sizing: border-box;
		}
		.modal {
			width: 400px;
			height: 300px;
			border: 1px solid #ccc;
		}
		.modal header {
			height: 45px;
			line-height: 45px;
			padding-left: 10px;
			border-bottom: 1px solid #ccc;
		}
		.btns {
			margin-bottom: 10px;
		}
		.modal.success {
			background: green;
		}
		.modal.warning {
			background: orange;
		}
		.modal.error {
			background: red;
		}
		.default {
			background-color: #ccc;
		}
	</style>
	<body>
		<div class="btns">
			<button data-status="S">成功</button>
			<button data-status="W">警告</button>
			<button data-status="E">失败</button>
			<button data-status="Ed">失败</button>
		</div>
		<div class="modal">
			<header class="default">消息提示</header>
			<div class="body"></div>
		</div>

		<script type="module" src="index.js"></script>
	</body>
</html>
